Controlled Component와 Uncontrolled Component

❓질문

리액트의 Controlled Component와 Uncontrolled Component의 차이점에 대해서 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

제어형 컴포넌트와 비제어형 컴포넌트는 state의 사용여부입니다 보통 제출폼에 많이 사용되며 제어형 컴포넌트는 state로 입력값을 관리합니다 state로 관리하기때문에 즉각적으로 어떠한 추가적 로직이있을때 제어형 컴포넌트를 사용합니다 반대로 비제어형 컴포넌트는 state로 입력값을 관리하는게아니라 ref로 dom에 접근하여 값을 조작합니다 그렇기때문에 리렌더링이 일어나지않고 입력폼이 최적화? 된느낌을 줍니다 리액트 훅 폼 라이브러리도 비제어형 컴포넌트를 사용합니다.

🏫 정리한 내용

제어형 컴포넌트와 비제어형 컴포넌트는 state의 유무에서 가장 차이가 납니다
먼저 제어형 컴포넌트는 입력한 값을 state에 보관하여 사용자에 입력이 변경될떄마다 onChange핸들러를 통해 상태를 업데이트 합니다. 주로 입력된 값을 검증 하거나 추가적인 로직이 있는 경우에 사용됩니다.

비제어형 컴포넌트는 state가 아닌 Dom 으로 입력값을 제어합니다. 그렇기 때문에 이는 리액트가 제어하지 않습니다. useRef를 통해 참조 객체 ref를 사용해서 dom요소에 직접 접근하여 값을 읽거나 조작합니다. 상대적으로 간단한 입력폼등에서 사용됩니다.